<template>
  <l-layout class="l-tab-page" v-show="!lr_loadPage" :left="240">
    <template #left>
      <l-panel :title="$t('接口分类')" style="padding-right: 0">
        <el-tree
          ref="mytree"
          v-loading="treeLoading"
          node-key="value"
          default-expand-all
          :expand-on-click-node="false"
          :data="apiArr"
          :props="defaultProps"
          @node-click="handleNodeClick"
        >
          <span class="lr-tree-node" slot-scope="{ node }">
            <i class="fa fa-sitemap"></i>
            {{ $t(node.label) }}
          </span>
        </el-tree>
      </l-panel>
    </template>
    <l-panel style="padding-left: 0">
      <template #toolLeft>
        <div class="l-panel--item">
          <el-input
            :placeholder="$t('请输入关键字查询')"
            v-model="searchWord"
            @keyup.enter.native="hanleSearch"
            size="mini"
          >
            <el-button slot="append" icon="el-icon-search" @click="hanleSearch"></el-button>
          </el-input>
        </div>
      </template>
      <l-table
        :loading="tableLoading"
        :columns="lr_getPageColumns(columns)"
        :dataSource="tableShowData"
        row-key="f_Id"
        :isPage="true"
        :pageTotal="tableTotal"
        :tablePage.sync="tableCurrentPage"
        @loadPageData="turnTablePage"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        default-expand-all
      >
        <!--
                <template v-slot:f_TenantType="scope" >
                    {{scope.row.f_TenantType==0 ?"普通租户":"系统平台租户"}}
                </template>
            	-->
        <l-table-btns :btns="tableBtns" @click="lr_handleTableBtnClick"></l-table-btns>
      </l-table>
    </l-panel>
  </l-layout>
</template>

<script>
const api = window.$api.data.dataInterface;
const api2 = window.$api.data.datainterfacecategory;
export default {
  components: {},
  data() {
    return {
      lr_isPage: true,
      // 表格
      columns: [
        { label: "接口名称", prop: "f_Name", minWidth: "120" },
        { label: "接口连接", prop: "f_Url", minWidth: "240" },
        { label: "请求方法", prop: "f_RequestMethod", minWidth: "120" },
        { label: "备注", prop: "f_Description", minWidth: "120" },
      ],
      tableBtns: [{ prop: "Edit", label: "选择" }],
      tableLoading: false,
      searchWord: "",
      tableShowData: [],
      tableData: [],

      formVisible: false,
      formVisible2: false,
      formTitle: "",
      formEditRow: null,
      formEdit: false,

      //分页
      tableTotal: 0,
      tablePageSize: 50,
      tableCurrentPage: 1,
      keyWord: "",

      apiArr: [],
      defaultProps: {
        children: "children",
        label: "label",
      },
      treeLoading: false,
      f_CategoryId: "",
    };
  },
  created() {
    //var data = await this.$awaitWraper(api2.getTenantList());
    this.$nextTick(() => {
      //this.loadTable();
      var _this = this;
      api2
        .getList()
        .then((res) => {
          res.data.data.forEach(function (v) {
            v.label = v.f_Name;
            v.value = v.f_Id;
          });
          var list = _this.$deepClone(res.data.data);
          _this.apiArr = this.lr_apiTree(list);
          _this.loadTablePageData();
        })
        .catch(() => {});
    });
  },
  computed: {},
  methods: {
    lr_apiTree(data) {
      data = data || [];
      return this.$toTree(data, "f_Id", "f_ParentId", "f_Id", "f_Name");
    },

    handleNodeClick(node) {
      this.loading = true;
      this.f_CategoryId = node.f_Id;
      this.loadTablePageData();
    },

    loadTablePageData(isNotFirst) {
      if (isNotFirst) {
        this.tableCurrentPage = 1;
        this.searchWord = "";
        this.tableData = [];
      }
      this.tableLoading = true;
      let queryData = {
        rows: this.tablePageSize,
        page: this.tableCurrentPage,
        keyword: this.searchWord,
        f_CategoryId: this.f_CategoryId,
        f_EnabledMark: 1,
      };
      this.tableData = [];
      api
        .getPage(queryData)
        .then((res) => {
          const data = this.$deepClone(res.data.data);
          this.tableData = this.lr_apiTree(data.rows);
          data.rows.forEach(function (v) {
            var type = JSON.parse(v.f_ResponseType);
            v.Type = type.dataTypeFullName;
          });
          //console.log(this.tableData);
          this.tableTotal = data.records;
          this.tableShowData = this.tableData;
          this.tableLoading = false;
        })
        .catch(() => {
          this.tableData = [];
          this.tableLoading = false;
        });
    },
    turnTablePage({ rows }) {
      this.tablePageSize = rows;
      console.log(rows);
      this.loadTablePageData(true);
    },
    hanleSearch() {
      this.loadTablePageData();
    },

    lr_handleTableBtnClick(e) {
      console.log(e);
      this.$emit("childForm", e);
    },
  },
};
</script>
